<template>
		<header>
			<div class="location"><a href=""><span>广州 <i class="iconfont icon-xiajiantou"></i></span></a></div>
			<div class="header-search">
				<input type="text" placeholder="输入商家/品类/商圈" >
				<i class="iconfont icon-sousuotianchong"></i>
			</div>
			<div class="my"><a href=""><span>我的 <i class="iconfont icon-yonghu"></i></span></a></div>
		</header>
</template>

<script>
	export default{
		name:"header1",
	}
</script>

<style scoped>
	
	header{
		width: 100%;
		height: 1rem;
		height: 50px;
		box-sizing: border-box;
		display: flex;
	    color: #fff;
	    background: #06c1ae;
	    border-bottom: 1px solid #21897d;
		
	}
	header .header-search{
		flex-grow: 1;
		height: 100%;
		text-align: center;
		display: flex;
		position:relative;
	}
	header .header-search>i{
		position:absolute;
	    top: 0.34rem;
	    left:.1rem;
	}
	header .header-search input{
	    width: 100%;
	    height: 0.64rem;
	    border-radius: 10px;
	    margin: 0 auto;
	    margin-top: .18rem;
	    outline: none;
	    padding: 2px 25px;
	    box-sizing: border-box;
	    background: rgba(56, 40, 40, 0.32);
	    color: white;
	    border:none;
	}
	input::-webkit-input-placeholder {
		color: #68dbce ; /* WebKit browsers */
	}
	input:-moz-placeholder {
		color: #68dbce ; /* / Mozilla Firefox 4 to 18 / */
	}
	input::-moz-placeholder {
		color: #68dbce ; /* / Mozilla Firefox 19+ / */
	}
	input:-ms-input-placeholder {
		color: #68dbce ; /* / Internet Explorer 10+ */
	}
	.location,.my{
		width: 80px;
		display: inline-block;
		font-size: .32rem;
		text-align: center;
		line-height: 1rem;

	}
	.location a,.my a{
	    display: block;
	    height: 100%;
	    color: white;
	}
</style>